<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" class="form-container" :model="page.query" ref="queryForm">
        <div class="search">
          <el-form-item label="工艺名称" prop="name">
            <el-input
                placeholder="请输入工艺名称"
                prefix-icon="el-icon-search"
                v-model="page.query.name"
            >
            </el-input>
          </el-form-item>
          <el-button icon="el-icon-search" type="success" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" type="success" class="reset_btn" @click="reset" >重置</el-button>
        </div>
        <div class="func">
          <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
        </div>
      </el-form>

    </el-card>
    <el-table
        :data="crafts"
        style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table_form">
            <el-form-item label="工艺名称:">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="工艺分类:">
              <span>
                {{ illustrateMap.get(props.row.illustrateType) }}
              </span>
            </el-form-item>
            <el-form-item label="工艺说明:">
              <el-card shadow="always">
                <span v-html="illustrateHtml(props.row.illustrate)"></span>
              </el-card>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="工艺名称"
          prop="name"
      >
      </el-table-column>
      <el-table-column
          label="单位"
          prop="unitName"
      >
      </el-table-column>
      <el-table-column
          label="销售价"
          prop="salePrice"
      >
      </el-table-column>
      <el-table-column
          label="成本价"
          prop="costPrice"
      >
      </el-table-column>
      <el-table-column
          label="费率"
          prop="rate"
      >
      </el-table-column>
      <el-table-column
          label="支付方式"
          prop="billingMethod"
      >
        <template v-slot="scope">
          <span>{{ billingMap.get(scope.row.billingMethod) }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="工艺类型"
          prop="illustrateType"
      >
        <template v-slot="scope">
          {{ illustrateMap.get(scope.row.illustrateType) }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="180"
      >
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @handlePage="handlePage" :page="page"></page>
    <el-dialog :title="title" :visible.sync="isShow" width="40%">
      <el-form :model="form" inline ref="craftForm">
        <el-form-item label="工艺名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工艺单位" prop="unit">
          <el-select v-model="form.unit" placeholder="请选择">

            <el-option
                v-for="item in $store.state.unit.unitDir"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售价" prop="salePrice">
          <el-input v-model="form.salePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="材料成本" prop="materialCost">
          <el-input v-model="form.materialCost" ></el-input>
        </el-form-item>
        <el-form-item label="人工成本" prop="manCost">
          <el-input v-model="form.manCost" ></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="costPrice" v-if="!Number.isNaN(form.materialCost+form.manCost)">
          <el-input :value="form.materialCost*1+form.manCost*1" disabled></el-input>
        </el-form-item>
        <el-form-item label="费率" prop="rate">
          <el-input-number v-model="form.rate" :precision="2" :step="0.01" :max="1" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="支付方式" prop="billingMethod">
          <el-select v-model="form.billingMethod" placeholder="请选择">
            <el-option
                v-for="item in billingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺分类" prop="illustrateType">
          <el-select v-model="form.illustrateType" placeholder="请选择">
            <el-option
                v-for="item in illustrateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺说明" prop="illustrate">
          <el-input v-model="form.illustrate" autocomplete="off"   type="textarea"  :rows="6" style="width: 500px"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Page from '@/components/page/index.vue'
import { deleteRole, editRole, getRole, saveRole } from '@/api/role'
import { deleteUnit, editUnit, getUnit, listUnit, saveUnit } from '@/api/unit'
import { deleteCraft, editCraft, getCraft, saveCraft } from '@/api/craft'

export default {
  name: 'LightAuxiliaryCost',
  data() {
    return {
      title: '',
      isShow: false,
      form: {
        name: '',
        unit: '',
        unitName: '',
        illustrate: '',
        salePrice: '',
        costPrice: '',
        rate: '',
        billingMethod: '',
        illustrateType: '',
        materialCost: '',
        manCost:''
      },
      page: {
        current: 1,
        size: 3,
        total: 0,
        query: {
          name: '',
          illustrateType: ''
        }
      },
      billingMap: new Map(),
      billingOptions: [
        { label: '正常计价', value: 5 },
        { label: '费率计费', value: 6 },
        { label: '按项计费', value: 7 }
      ],
      illustrateMap: new Map(),
      illustrateOptions: [
        { label: '水电工', value: 1 },
        { label: '木工', value: 2 },
        { label: '瓦工', value: 3 },
        { label: '油漆工', value: 4 },
        { label: '杂项', value: 8 }
      ]
    }
  },
  computed: {
    crafts() {
      this.page.total = this.$store.state.craft.crafts.total
      return this.$store.state.craft.crafts.records
    },
    illustrateHtml() {
      return function(str) {
        let result = ''
        for (let i = 0; i < str.length; i++) {
          if (!Number.isNaN(str[i]) && str[i + 1] === '、'&&i!==0) {
            result += '<br>'
          }
          result += str[i]
        }
        return result
      }

    },

  },
  mounted() {


    this.reloadCrafts()
    this.handleOptions()
    this.$store.dispatch('unit/listUnit')

  },
  components: {
    Page
  },
  methods: {
    reset() {
      this.page.current = 1
      this.$refs.queryForm.resetFields()
      this.reloadCrafts()

    },

    handleOptions() {
      this.billingOptions.forEach(n => {
        this.billingMap.set(n.value, n.label)
      })
      this.illustrateOptions.forEach(n => {
        this.illustrateMap.set(n.value, n.label)
      })
    },
    handleEdit(id) {
      this.title = '编辑工艺'
      this.isShow = true
      getCraft(id).then(res => {
        this.form = { ...res }
        this.form.createTime = ''
        this.form.lastUpdateTime = ''
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteCraft(id).then(() => {
          this.reloadCrafts()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    reloadCrafts(reset = true) {
      if (reset) {
        this.page.current = 1
      }
      return new Promise((resolve, reject) => {
        this.$store.dispatch('craft/pageCraft', this.page).then(() => {
          resolve()
        }).catch((err) => {
          reject(err)

        })
      })

    },
    handleAdd() {
      this.title = '添加工艺'
      this.isShow = true
      this.form.id = ''
      this.form.costPrice=''
      this.$refs.craftForm.resetFields()
    },
    search() {
      this.reloadCrafts()
    },
    saveOrUpdate() {
      if (this.form.id) {
        editCraft(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.resetData()
        })

      } else {
        saveCraft(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.resetData()
        })
      }

    },
    resetData() {
      this.$refs.craftForm.resetFields()
      this.isShow = false
      this.title = ''
      this.reloadCrafts()
    },
    cancel() {
      this.isShow = false
      this.title = ''
      this.$refs.craftForm.resetFields()

    },
    handlePage(flag) {
      this.reloadCrafts(flag)
    }
  }
}
</script>

<style>
.form-container {
  display: flex;
  justify-content: space-between;
}

.table_form {
  font-size: 0;
}

.table_form label {
  width: 90px;
  color: #99a9bf;
}

.table_form .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.reset_btn {
  background-color: #722ed1;
  border: 1px solid #722ed1;
}
.reset_btn:hover {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
.reset_btn:focus {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
</style>
